<template>
  <div class="xd-LearningHome-search">
        <el-card class="box-card m_t_b_5px" shadow="hover">
          <el-form ref="form" label-width="80px">
            <el-form-item label="搜索：">
                  <el-radio-group v-model="selectType" size="small" @change="handleQuery">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                >{{item.dictLabel}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label style="margin-top:20px;">
              <el-input
                v-model="keyword"
                clearable
                placeholder="请输入关键字"
                size="small"
                style="width:300px;margin-right:10px;"
              ></el-input>
              <el-button type="primary" size="small" @click="query">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="m_t_b_5px news_panel" shadow="hover">
            <template  v-if="selectType=='tzgg'">
                <ul class="news_list item_flex_ul">
                    <li v-for="p in newsData.list" :key="p.i_id" @click="goNoticeDetail(p.i_id)">
                    <span class="title">
                        <span style="color:red;" v-if="p.i_is_top">【顶】</span>
                        · {{ decodeURI(p.v_seach_v_notice_title)}}
                    </span>
                    <span class="time">{{p.dtm_publish_date}}</span>
                    </li>
                    <p v-if="!newsData.list.length" class="no-data">{{NO_DATA}}</p>
                </ul>
            </template>
             <template  v-if="selectType=='zcfg'">
                    <ul class="news_list item_flex_ul">
                        <li v-for="p in newsData.list" :key="p.policyId" @click="goNewsDetail(p.policyId,'1')">
                        <span class="title">· {{p.policyTitle}}</span>
                        <span class="time">{{p.createTime}}</span>
                        </li>
                        <p class="no-data" v-if="!newsData.list.length">{{NO_DATA}}</p>
                    </ul>
             </template>
             <template v-if="selectType=='kc'">
                   <div class="course_panel">
                        <div
                        class="item"
                        v-for="(item, index) in curriculumList"
                        :key="'curriculum' + index"
                        @click="openCourseIntroduction(item)"
                        >
                        <!--   :style="{ marginRight: (index + 1) % 3 === 0 ? '0px' : '' }" -->
                        <img class="cover" :src="item.imgUrl ? item.imgUrl : defaultImg" />
                        <div class="course_body">
                            <p class="title" v-text="item.curriculumTitle"></p>
                            <p class="p_top">课程时长：{{ item.curriculumTimeLong }}</p>
                            <p class="p_top">
                            授课人：
                            <span>{{ item.curriculumTeacher }}</span>
                            <span class="credits_tag">
                                <!-- 学分：
                                <span class="text_color_429688">{{item.curriculumPoints}}</span> -->
                            </span>
                            </p>
                        </div>
                        </div>
                        <p v-if="!curriculumList.length">{{ NO_DATA }}</p>
                    </div>
             </template>
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="formNews.pageNumber"
            :page-sizes="[5 , 10, 20, 30, 40, 50,100]"
            :page-size="formNews.pageSize"
            :layout="PAGE_LAYOUT"
            :total="newsData.total"
          ></el-pagination>
        </el-card>
  </div>
</template>
<script>
export default {
  name: 'SearchKeyword',
  data() {
    return {
      keyword:'',
      selectType:'kc',
      newsData: {
        total: 0,
        list: []
      },
      curriculumList:[],
      formNews: {
        pageNumber: 1,
        pageSize: 10
      },
      themeTypeList: [{
        dictValue: 'kc',
        dictLabel: '课程'
      },{
        dictValue: 'tzgg',
        dictLabel: '通知公告'
      },{
        dictValue: 'zcfg',
        dictLabel: '政策法规'
      }]
    }
  },
created() {
        window.addEventListener('keydown', this.handleQuery, true)//开启监听键盘按下事件
},
  mounted() {
    this.$store.commit('updateActiveMenu', '')
    this.keyword = this.$route.query.keyword;
    this.query()
  },
  methods: {
    handleQuery(){
        this.formNews.pageNumber = 1;
        this.query();
    },
    query(){
        switch (this.selectType) {
            case "tzgg":
                this.queryNotice();
                break;
          case "zcfg":
                this.queryPolicyInfo();
                break;
            case "kc":
                this.queryKc();
                break;
            default:
                break;
        }
    },
    queryKc(){
         utils.post("curriculum/my/list",
        {
          pageNumber: this.formNews.pageNumber,
          pageSize: this.formNews.pageSize,
          keyword: this.keyword,
        },
        (res) => {
          if (res.success) {
            this.curriculumList = res.data.rows;
            this.newsData.total = res.data.total;
          }
        }
      );
    },
    openCourseIntroduction(item) {
      this.$router.push({
        path: "/LearningHome/Learning/CourseIntroduction",
        query: {
          tid: item.curriculumId,
        },
      });
    },
    goNoticeDetail(id) {
      this.$router.push({ path: '/LearningHome/NoticeCenter/Detail', query: { id: id, activeMenu: '/LearningHome/NoticeCenter' } })
    },
    queryNotice() {
      this.formNews.v_seach_v_notice_title =this.keyword;
      utils.post('/notice/list', this.formNews, res => {
        if (res.success) {
          this.newsData.total = res.data.total
          this.newsData.list = res.data.rows
        }
      })
    },
    queryPolicyInfo() {
      this.formNews.policyTitle = this.keyword;
      utils.post(utils.api.policyInfo.policyNewsList, this.formNews, res => {
        if (res.success) {
           this.newsData.total = res.data.total
          this.newsData.list = res.data.rows
        }
      })
    },

    sizeChange(val) {
        this.formNews.pageSize = val
        this.query();
    },
    pageChange(val) {
       this.formNews.pageNumber = val;
       this.query();
    },
    goNewsDetail(id, tag) {
      this.$router.push({ path: '/LearningHome/PolicyInterpretation/PolicyDetail', query: { id: id, tag: tag } })
    }
  }
}
</script>

<style lang="less">
.xd-LearningHome-search {
  // width: 1200px;
  margin: 0 auto;

  .el-form-item {
    margin-bottom: 0px;
    .el-form-item__label {
      padding: 0px;
      text-align: left;
      font-size: 16px;
    }
  }

  .el-radio-group {
    .el-radio-button__inner {
      border: none;
      font-size: 16px;
    }
    .el-radio-button:last-child .el-radio-button__inner,
    .el-radio-button:first-child .el-radio-button__inner {
      border-radius: 0px;
    }
  }

  .news_panel {
    ul.news_list li {
      border-bottom: solid 1px #dcdfe6;
      padding-bottom: 5px;
    }
  }


  .course_panel {
    display: flex;
    flex-wrap: wrap;

    .item {
      cursor: pointer;
      width: 268px;
      height: 274px;
      background-color: #ffffff;
      border-radius: 4px;
      border: solid 1px #e9e9e9;
      margin-right: 18px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      .cover {
        display: block;
        width: 100%;
        height: 173px;
      }

      img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }

      .course_body {
        padding: 13px 12px;
        color: #666666;
        font-size: 16px;

        p {
          display: flex;
          align-items: center;
        }

        .p_top {
          margin-top: 6px;
          font-size: 14px;
        }

        .title {
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .credits_tag {
          margin-left: auto;
        }
      }
    }
  }
}
</style>
